<!--在pc微信小程序上有bug-->
<template>
	<view>
		<!-- 自定义顶部栏 -->
		<view class="nav-bar" :style="{height:navBarHeight}">
			<view class="goback" :style="{height:searchHeight,width:searchHeight,minHeight:searchHeight,lineHeight:searchHeight,top:searchTop}" >
				<u-icon name="arrow-left" size="24" @click="goBack()"></u-icon>
			</view>
		    <view class="search":style="{height:searchHeight,top:searchTop,right:navigationRightWidth,width:searchWitdh}" >
				<u-search :placeholder="placeholder" :show-action="false" :height="searchHeight2"
				 	@custom="search()"
					@search="search()"
					@blur="search()"
					@clear="search()"
					v-model="keyword"></u-search>
			</view>
		</view>

		<!-- 占位，高度与顶部栏一样 -->
		<view :style="{height:navBarHeight}" style="position: relative;" ></view>
	</view>
</template>

<script>
	export default {
		name:"sk-navbar-search-bar",
		created() {
			this.navBarHeight =  getApp().globalData.statusBarHeight + 44 + 'px'
			this.searchHeight =  getApp().globalData.searchHeight + 'px'
			this.searchHeight2 =  getApp().globalData.searchHeight
			this.searchTop =  getApp().globalData.searchTop -2 + 'px'  // TODO 不知道其他机型是不是这样的
			this.navigationRightWidth = getApp().globalData.navigationRightWidth + 'px'
			this.searchWitdh =  getApp().globalData.windowWidth - getApp().globalData.navigationRightWidth
			 - getApp().globalData.searchHeight -10 + 'px'
		},
		props: {
			placeholder:{
				type:String,
				default:'请输入关键字搜索',
			},

		},
		data() {
			return {
				navBarHeight:0,
				searchHeight:0,
				searchHeight2:0,
				searchTop:0,
				searchWitdh:0,
				navigationRightWidth:0,
				keyword:'',
			};
		},methods: {
			goBack(){
				const pages = getCurrentPages()

				// 有可返回的页面则直接返回，uni.navigateBack  默认返回失败之后会自动刷新页面 ，无法继续返回
				if (pages.length > 1) {
				 uni.navigateBack(1)
				 return;
				}else{ //找不到直接回到首页
					uni.reLaunch({
					 url: "/pages/index/index"
					})
				}

			},
      // 用于重置搜索文本 e 由父组件传入
      // <sk-navbar-search-bar @search="search" :placeholder="placeholder" ref="search"/>
      // this.$refs.search.reset(this.keyword[this.tabIndex])
			reset(e){
				this.keyword = e
			},
			search() {
				uni.$u.debounce(() => {
					this.$emit('search', this.keyword?this.keyword:'')
				}, 500);
			},
		},

	}
</script>

<style lang="less">
.nav-bar{
	position: fixed;
	overflow-y: hidden;
	display: flex;
	width: 100%;
	top: 0;
	color: #333;
	background: #fff;
	z-index: 999;
}
.goback{
	display: flex;
	justify-content: center;
	align-items:center;
	position: absolute;
}
.nav-bar .search{
	position: absolute;
	width: 200px;
}
</style>
